<!DOCTYPE html>
<html>
<head>
    <!-- 基础设置 -->
    <meta charset="utf-8">
    <title>自己实现的天气预报01-html部分</title>
    
    <!-- 样式表引入 -->
    <style type="text/css">
        /* 后续CSS内容将在此处详细注释 */
    </style>
</head>
<body>
	<!-- 大背景容器 -->
	<div id="box">
			<!-- 顶部导航栏 -->
			<div class="top-DaoHan">
				<!-- 城市显示区域 -->
				<div class="city-display">
					<!-- 当前默认城市：北京 -->
					北京
					<!-- 城市切换按钮 -->
					<span id="city-btn">[切换]</span>
				</div>
				<!-- 城市内容输入框(默认是隐藏的) -->
				<div class="input-area">
					<!-- 城市输入框 -->
					<input type="text" class="city-input"/>
					<!-- 确认按钮 -->
					<button class="queren-btn">确认</button>
				</div>
			</div>
			
			<!-- 主题内容 -->
			<div calss="main-content">
				<!-- 上侧显示：当前天气+空气质量 -->
				<div class="current-tianqi">
					<!-- 左侧当前天起基本信息显示区域 -->
					<div class="jibenxingxi">
						<!-- 温度主显示区域 -->
						<div class="wendu">
							<!-- 温度 -->
							<span class="current-wendu">25</span>
							<!-- 符号 -->
							<span class="fuhao">°</span>
						</div>
						<!-- 天气图标+类型 -->
						<div class="tianqi-icon">
							<!-- 图标 -->
							<img src="./image/qing.png" class="qing-icon" alt="天气图标">
							<!-- 类型 -->
							<span class="tianqi-type">晴</span>
						</div>
						<!-- 详细信息列表 -->
						<ul class="xingxi-list">
							<li>体感温度：<span class="tigan-wendu">24°</span></li>
							<li>湿度：<span class="tigan-shidu">45%</span></li>
							<li>风速：<span class="tigan-fengsu">3级</span></li>
						</ul>
					</div>
					<!-- 右侧显示空气质量 -->
					<div class="kongqizhilain">
						<!-- 质量显示 -->
						<div class="aqi-box">
							<div class="api-number">48</div>
							<div class="api-level">优</div>
						</div>
						<!-- 评价描述 -->
						<div class="aqi-text">
							空气质量令人满意，基本无空气污染
						</div>
						<!-- 指数参数 -->
						<div class="aqi-zhishu">
							<li>PM2.5：<span id="" class="pm2.5">22</span></li>
							<li>PM10：<span id="" class="pm10">35</span></li>
							<li>NO2：<span id="" class="no2">8</span></li>
						</div>
					</div>
				</div>
				<!-- 下侧显示未来七天的预报情况 -->
				<div class="weilai-qiri-tianqi">
					<!-- 七天的结构大盒子 -->
					<ul class="day-style-box">
					    <!-- 每一天的预报项结构 -->
					    <li class="forecast-item">
							<!-- 日期 -->
					        <div class="forecast-date">04-25</div>
					        <div class="forecast-week">周一</div>
							<!-- 天气图标 -->
					        <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
					        <div class="temp-range">
					            <span class="high-temp">18°</span>
					            <span class="low-temp">5°</span>
					        </div>
							<!-- 情况 -->
					        <div class="weather-type">晴</div>
					        <div class="wind-direction">东风</div>
					    </li>
					    <!-- 重复6个相同结构的li（共7天） -->
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-26</div>
						    <div class="forecast-week">周二</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-27</div>
						    <div class="forecast-week">周三</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-28</div>
						    <div class="forecast-week">周四</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-29</div>
						    <div class="forecast-week">周五</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-30</div>
						    <div class="forecast-week">周六</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">05-01</div>
						    <div class="forecast-week">周天</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
					  </ul>
				</div>
			</div>
			<!-- 图表区域 -->
			<div class="tubiao">
				<div id="title">未来七天温度趋势</div>
				<div id="wendu-tubiao">
					<!-- 由js动态生成 -->
				
					<!-- canvas是HTML5中专门用来绘制图形的画布标签。 -->
					<canvas id="tempChart"></canvas> 
				</div>
			</div>
	</div>
    <!-- JavaScript库引入 -->
    <script src="jquery-3.4.1.min.js"></script>
    <!-- 自定义脚本 -->
    <script>
        /* 后续JS内容将在此处详细注释 */
    </script>
</body>
</html>